<script setup>
import { reactive, toRefs, onMounted, ref } from 'vue';
import S from '../components/index.js';
import Content from '../components/Content.vue';
import Fish from '../components/Fish.vue';
import Chart from '../components/Chart.vue';
import Gaunt from '../components/gaunt/SeptGaunt.vue';
import X6 from '../components/x6/X6.vue';
const artList = [
    {
        art_id: 'x6_vueNode',
        art_name: 'X6自定义节点及自动排列',
    },
    {
        art_id: 'directive_dragSort',
        art_name: '拖拽排序',
    },
    {
        art_id: 'component_tree',
        art_name: '树状图组件封装',
    },
    {
        art_id: 'chart——customText',
        art_name: '饼图中心圆数据展示',
    },
    {
        art_id: 'css-theme',
        art_name: '简单的实现换肤功能',
    },
    {
        art_id: 'three-easyThree',
        art_name: '简单的THREE初始化',
    },
    {
        art_id: 'question-postQuestions',
        art_name: 'can`t found modules in ./xxx/xxx.vue',
    },
    {
        art_id: 'node-gnvm',
        art_name: 'node版本切换控制工具',
    },
    {
        art_id: 'three-graph',
        art_name: '三维知识图谱',
    },
    {
        art_id: 'font-color-light',
        art_name: '霓虹灯字体',
    },
    {
        art_id: 'easy-question-equal',
        art_name: '简单的问题：赋值未回显',
    },
];
for (let index = 0; index < 10; index++) {
    artList.push({
        art_id: `xx${index}`,
        art_name: '待添加',
    });
}
const Draw = function (name) {
    S.UI.simulate(name);
};
let show = ref(false);
const menuArr = ref([
    {
        img: '../../public/img/home.png',
        imgClass: 'home',
        imgSrc: '',
        text: '首页',
    },
    {
        img: '../../public/img/questions.png',
        imgClass: 'questions',
        imgSrc: '',
        text: '提问',
    },
    {
        img: '../../public/img/game.png',
        imgClass: 'game',
        imgSrc: '',
        text: '游戏',
    },
    {
        img: '../../public/img/jianli.png',
        imgClass: 'jianli',
        imgSrc: '',
        text: '简历',
    },
    {
        img: '../../public/img/gitee.png',
        imgClass: 'gitee',
        imgSrc: '',
        text: '仓库',
    },
    {
        img: '../../public/img/money.png',
        imgClass: 'money',
        imgSrc: '',
        text: '投喂',
    },
]);
// menuArr.value.forEach(menu => {
//     import(menu.img).then(res => {
//         menu.imgSrc = res.default;
//     });
// });
onMounted(() => {
    setTimeout(() => {
        show.value = true;
        S.UI.simulate(`Are you Sure?|Confirm or Cancel`);
    }, 2000);
});
</script>

<template>
    <div class="home-view" :style="`opacity:${show ? 1 : 0}`">
        <div class="home-view-nav">
            <span class="nav-logo">
                <span style="--i: 1">泰</span>
                <span style="--i: 2">坦</span>
                <span style="--i: 3">_</span>
                <span style="--i: 4">T</span>
                <span style="--i: 5">t</span>
                <span style="--i: 6">a</span>
                <span style="--i: 7">n</span>
            </span>
            <div class="home-view-nav-menu">
                <div class="home-view-nav-menu-item" v-for="menu in menuArr" :key="menu.img">
                    <div class="home-view-nav-menu-item-img" :class="`img-box img-${menu.imgClass}`">
                        <!-- <img draggable="false" :src="menu.imgSrc" /> -->
                    </div>
                    <span class="home-view-nav-menu-item-text">{{ menu.text }}</span>
                </div>
            </div>

            <span class="nav-logo-subTitle">所见皆前端，好马配好鞍~~</span>
        </div>
        <div class="home-view-article-list">
            <Content headTitle="我的文章" subTitle="万般皆下品,惟有读书高。">
                <div class="article-list">
                    <div class="article" v-for="(item, index) in artList" :key="item.art_id">
                        <div class="text-shadow">ART {{ index + 1 }}. {{ item.art_name }}</div>
                        <div class="text-body">ART {{ index + 1 }}. {{ item.art_name }}</div>
                    </div>
                </div>
            </Content>
        </div>
        <div class="home-view-show-chart" id="chart">
            <Content>
                <Chart></Chart>
            </Content>
        </div>
        <div class="home-view-show-x6">
            <Content headTitle="拓扑图" subTitle="行云如流水,渐行渐远">
                <X6></X6>
            </Content>
        </div>
        <div class="home-view-show-gaunt">
            <Content headTitle="甘特图" subTitle="时间就是金钱,我的朋友">
                <Gaunt></Gaunt>
            </Content>
        </div>
        <div class="home-view-show-three">
            <Content headTitle="模板件" subTitle="唯有清新深得我心~">
                <Fish style="transform-origin: center 50%; transform: scale(0.55)"></Fish>
            </Content>
        </div>
    </div>
</template>
<style lang="less">
.home-view {
    .sept-outer-surface .gantt_layout_cell .gantt_hor_scroll,
    .gantt_layout_content.gantt_task_vscroll {
        opacity: 0.1;
        &:hover {
            opacity: 0.7;
        }
    }
}
</style>
<style lang="less" scoped>
.home-view {
    width: 100%;
    height: 100%;
    opacity: 0;
    color: var(--fontColor);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    padding: 8px;
    transition: opacity 0.3s;
    .img-box {
        background-size: 100% 100%;
    }
    .img-home {
        background-image: url('../../public/img/home.png');
    }
    .img-questions {
        background-image: url('../../public/img/questions.png');
    }
    .img-game {
        background-image: url('../../public/img/game.png');
    }
    .img-jianli {
        background-image: url('../../public/img/jianli.png');
    }
    .img-gitee {
        background-image: url('../../public/img/gitee.png');
    }
    .img-money {
        background-image: url('../../public/img/money.png');
    }
    & > div {
        // background: rgba(255, 255, 255, 0.3);
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #6db2ce;
        padding: 4px;
    }
    &-nav {
        grid-area: 1 / 1 / 3 / 13;
        position: relative;
        .nav-logo {
            display: inline-block;
            font-size: 48px;
            font-style: italic;
            color: #fff;
            font-weight: 900;
            span {
                animation: fontColor 1s infinite;
                animation-delay: calc(0.1s * var(--i));
            }
        }
        &-menu {
            width: 80%;
            height: 60px;
            position: absolute;
            bottom: 16px;
            right: 16px;
            border-radius: 4px;
            box-shadow: 0px 0px 2px #0091ff;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            &-item {
                height: 50px;
                display: flex;
                &:hover {
                    color: red;
                }
                &:active {
                    color: rgb(220, 102, 102);
                }
                align-items: center;
                &-text {
                    font-size: 18px;
                    line-height: 50px;
                }
                &-img {
                    width: 50px;
                    height: 50px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        @keyframes fontColor {
            0% {
                filter: blur(1px) hue-rotate(0deg);
                text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff;
            }
            100% {
                filter: blur(1px) hue-rotate(360deg);
                text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff;
            }
        }
        .nav-logo-subTitle {
            display: inline-block;
            position: absolute;
            font-size: 16px;
            top: 85px;
            left: 100px;
        }
    }
    &-article-list {
        grid-area: 3 / 9 / 13 / 13;
        .article-list {
            width: 100%;
            height: 100%;
            overflow-y: overlay;
            overflow-x: hidden;

            .article {
                position: relative;
                width: 100%;
                height: 60px;
                transform-style: preserve-3d;
                perspective: 200;
                .text-shadow {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 60px;
                    line-height: 60px;
                    font-weight: 800;
                    font-size: 14px;
                }
                .text-body {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 60px;
                    line-height: 60px;
                    font-weight: 800;
                    font-size: 14px;
                    transition: transform 0.3s;
                }
                &:hover {
                    .text-shadow {
                        filter: blur(1px);
                        opacity: 0.6;
                    }
                    .text-body {
                        transform: translate3d(7px, -7px, 2px);
                    }
                }
            }
        }
    }
    &-show-chart {
        grid-area: 3 / 1 / 8 / 5;
    }
    &-show-x6 {
        grid-area: 3 / 5 / 8 / 9;
    }
    &-show-three {
        grid-area: 8 / 5 / 13 / 9;
    }
    &-show-gaunt {
        grid-area: 8 / 1 / 13 / 5;
    }
}
</style>
